<template>
	<view>
		<view class="headerBox">
			<view class="header" :style="{'padding-top': statusLineHeight + 'px'}">
				<view class="headerLeft">
					<input type="text" placeholder="点击搜索商品" disabled="true" @click="tosousuo">
				</view>
			</view>
		</view>
		<view class="boxcolor"></view>
		<view class="relebox">
			<view class="flexbetween margin_top1" style="color: #fff; padding: 0 25rpx;font-size: 28rpx;">
				<view class="bold">等级：{{userInfo.custom_jflevel_id?userInfo.customjflevel.name:"暂无等级"}}</view>
				<view class="" style="position: relative;" @click="jumpurl('/pages/index/news')">
					<u-icon name="bell" color="#fff" size="28"></u-icon>
					<u-badge :offset='[-5,-5]' absolute max="99" :value="newsNumAll"></u-badge>
				</view>
			</view>
			<view class="banner">
				<u-swiper :list="list1" @click="clicklbt" circular height="200" keyName="image_text"></u-swiper>
			</view>
			<view class="activityBox" >
				<!-- <view class="activity" @click="jumpurl('/pages/index/rewuxq')" v-if="is_login && bannerBottomData">
					<view class="activityLeft">
						<view class="Al1">截止时间</view>
						<view class="">
							<view class="time" style="color: #28C445;">
								还剩{{DifferenceTimer(bannerBottomData.end_time*1000,Number(new Date()))}}天
							</view>
						</view>
						<view class="xiankuan">{{bannerBottomData.notes}}</view>
					</view>
					<view class="activityRight">
						<view class="Ar1">{{bannerBottomData.name}}</view>
						<view class="Ar1" style="margin-top: 20rpx; color: #28C445;">成长值：{{bannerBottomData.rate}}%
						</view>
						<view class="jdt">
							<u-line-progress :percentage="Number(bannerBottomData.rate)" activeColor="#28C445"
								:showText="false" height="20">
							</u-line-progress>
						</view>
						<view class="Ar3">
							<view class="Ar3Left">
								<view class="bdr cor"></view>
								<view class="">达标积分：<text style="color: #28C445;">{{bannerBottomData.db_score}}</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<view class="jdt margin_top"  @click="jumpurl('/pages/index/rewuxq')" v-if="is_login && bannerBottomData">
					<view class="flexbetween">
						<view class="mubiao">截至时间：{{DifferenceTimer(bannerBottomData.end_time*1000,Number(new Date()))}}天</view>
						<view class="mubiao_content flexleft">
							<view style="color: #fff;">距目标: <text style="color: #1ED76D;">{{(Number(bannerBottomData.db_score) - Number(bannerBottomData.get_score))>0?(Number(bannerBottomData.db_score)-Number(bannerBottomData.get_score))+"分":"超"+Math.abs(Number(bannerBottomData.db_score)-Number(bannerBottomData.get_score))}}</text></view>
						</view>
					</view>
					<view class="flexbetween">
						<view class="lable margin_top" style="color: #1ED76D;font-weight: bold;">成长值{{Number(bannerBottomData.rate)}}%</view>
						<view class="lable margin_top xiankuan" style="color: #ffff;text-align: right;">{{bannerBottomData.name}}</view>
					</view>
					<view style="margin-top: 30rpx;padding: 0 50rpx;">
						<u-line-progress :percentage="Number(bannerBottomData.rate)" height="26" activeColor="#1ED76D"> </u-line-progress>
					</view>
					<view class="jdt_bottom xiankuan">{{bannerBottomData.notes}}</view>
					<view class="jdt_leftimage">
						<image src="@/static/smallIcon/hbleft.png" mode=""></image>
					</view>
					<view class="jdt_righttimage">
						<image src="@/static/smallIcon/hbright.png" mode=""></image>
					</view>
				</view>
				<view class="noticeBar">
					<u-notice-bar :text="text1" direction="column" @click="enternews($event)"></u-notice-bar>
				</view>
			</view>
			<view class="good" v-if="is_login">
				<view class="goodMoney">
					<view class="font">超值抢购活动</view>
					<view class="itemBox" @click="cuxiaoxq(item.id)" v-for="item in qgData" :key="item.id">
						<view class="itemBoxTop">
							<view class="itemBoxTopLeft">
								<view class="img">
									<view class="d1" v-if="item.xg_num!=0">限购{{item.xg_num}}件</view>
									<image :src="item.image_text" mode=""></image>
								</view>
							</view>
							<view class="itemBoxTopRight">
								<view class="d1 xiankuan">{{item.name}}</view>
								<view class="xg_info" v-if="item.xg_num!=0">限购数量:{{item.xg_num}}</view>
								<view class="xg_info sanhang">{{item.notes}}</view>
							</view>
						</view>
						<view class="itemBoxBottom">
							<view class="itemBoxBottomRight"><text style="color: #28C445;">剩余数量：</text><text
									style="color: #FF0000;">{{item.sy_num}}</text></view>
							<view class="itemBoxBottomRight"><text
									style="color: #28C445; margin-top: 20rpx;">截止时间：</text><text
									style="color: #FF0000;">{{DifferenceTimer(item.end_time*1000,Number(new Date()))}}天</text></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 默认分类 -->
			<view class="shop">
				<u-tabs :list="list2" @click="click" lineColor="#F5AC4F" :activeStyle="{
					color: '#333333',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
					}" :inactiveStyle="{
					color: '#999999',
					fontWeight: 'bold',
					}"></u-tabs>
				<view class="flexcenter" style="margin-top: 0rpx;" v-if="!list.data.length">
					<view class="placeholderimage"></view>
				</view>
				<view class="box">
					<view class="classification" v-for="(item,index) in list.data" @click="getCommodityDetail(item.id)">
						<view class="img">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="detailed">
							<view class="info">
								<view class="overhidden">{{item.name}}</view>
								<view class="xiaohuang margin_top1">积分:{{item.smallgoodsunit.priceinfo.buy_send_score}}分
								</view>
							</view>
						</view>
						<view class="flexbetween zdy margin_top1">
							<!-- <view class="">库存:{{item.goods_num || 0}}</view> -->
							<view class="">月销{{item.mouth_sales || 0}}</view>
						</view>
						<view class="foot margin_top1">
							<view class="price">￥{{item.smallgoodsunit.priceinfo.prev_xs_price?item.smallgoodsunit.priceinfo.prev_xs_price:item.smallgoodsunit.priceinfo.price || 0}}</view>
							<view class="" @click.stop="addCart(item)">
								<uni-icons type="cart" size="26" color="rgb(245,172,79)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar current=0 ref="cars"></tabbar>
	</view>
</template>

<script>
	import httpRequest from '@/commonFun/httpRequest.js'
	export default {
		data() {
			return {
				show: false,
				statusLineHeight: 0,
				list1: [],
				list2: [], //分类列表
				isLogin: false,
				bannerBottomData: null, //活动信息
				qgData: [], //超值抢购活动数据
				fenleiId: '',
				page: 1,
				limit: 10,
				list: {
					data: [],
				},

				text1: [],
				is_login: false,
				userInfo:{},
				newsNumAll:0,
				newsData:[],
			}
		},
		onReady() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect() //获取胶囊坐标信息
			console.log(menuButtonInfo, "胶囊信息")
			this.statusLineHeight = menuButtonInfo
				.top //给输入框高度赋值　（不乘2的原因是不管什么手机获取到的胶囊的坐标单位就是px，输入框从胶囊top位置显示，文字用这个方法可以试着设置一下line-height跟胶囊一样高应该也行）
		},
		onLoad(options) {
			if (options.suid) {
				uni.setStorage({
					data: options.suid,
					key: 'suid'
				})
			}
			// #ifdef MP-WEIXIN
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				let referee_id = options.staff_id ? options.staff_id : (theRequest.staff_id ? theRequest.staff_id :
					0);
				if (referee_id != 0) {
					uni.setStorageSync('staff_id', referee_id);
				}
			}
			// #endif
			uni.hideTabBar(); //隐藏tab
			this.banner()
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.userMy()
				this.activityList()
				this.huodong()
				this.getnewsNum()
			}
			this.fenlei()
			this.getnews()
			this.$refs.cars.getlist()
		},
		methods: {
			getnews() {//滚动消息
				httpRequest.request('/customapi/index/getPtNotice', 'GET', {
					page: 1,
					limit: 1000,
					type: 3
				}, false, false, true).then(res => {
					let arr = []
					res.data.data.forEach(item=>{
						arr.push(item.title)
					})
					this.text1 = arr
					this.newsData = res.data.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			enternews(index){
				uni.navigateTo({
					url: "/pages/index/newscontent?id=" + this.newsData[index].id
				})
			},
			DifferenceTimer(now,before){
				let num_day = (Number(now) - Number(before)) / (1000*60*60*24);
				return num_day.toFixed(0)
			},
			getnewsNum(){
				httpRequest.request('/customapi/index/newsNoReadNum', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.newsNumAll = res.data.total_noread_num
					} else {
						httpRequest.toast(res.msg);
					}
				})
				
			},
			// 调取我的接口
			userMy() {
				let _this = this
				httpRequest.request('/customapi/user/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			// 轮播
			banner() {
				httpRequest.request('/customapi/index/getAdvertiseList', 'POST', {
					is_more: 1
				}).then(res => {
					if (res.code == 1) {
						this.list1 = res.data;
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			// 促销活动
			activityList() {
				httpRequest.request('/customapi/user/activityList', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.qgData = res.data;
						console.log(this.qgData,"99999");
					}
				})
			},
			huodong() {
				httpRequest.request('/customapi/user/activity1Detail', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.bannerBottomData = res.data;
					}else{
						this.bannerBottomData = null
					}
				})
			},
			//商品分类
			fenlei() {
				let _this = this;
				httpRequest.request('/customapi/goods/goodsCategory', 'GET', {}).then(res => {
					if (res.code == 1) {
						let arr = []
						res.data.forEach(item => {
							arr.push({
								badge: {
									value: item.goods_num1,
								},
								id: item.id,
								name: item.name
							})
						})
						arr.unshift({
							badge: {
								value: 0,
							},
							id: "",
							name: "全部"
						})
						this.list2 = arr
						// this.fenleiId = this.list2[0].id
						_this.getlist(); //商品列表
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			getlist(isPage, page) {
				let _this = this;
				httpRequest.request('/customapi/goods/index', 'POST', {
					category_id: _this.fenleiId,
					page: page || 1,
					limit: _this.limit,
					keyword: "",
					is_scoredh: 0,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data.push(...resList.data);
						} else {
							_this.list = res.data;
							_this.list.data = resList.data;
						}
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getlist(true, page);
			},
			clickOverlay() {
				this.shopShow = false;
			},
			tosousuo() {
				uni.navigateTo({
					url: '/pages/index/sousuo'
				})
			},
			cuxiaoxq(id) {
				uni.navigateTo({
					url: '/pages/index/cuxiaoxq?id=' + id
				})
			},

			date(timer) {
				var date = new Date(timer * 1000); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "年" + month + "月" + day + "日"

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			dates(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			//添加购物车
			addCart(item) {
				let _this = this;
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: '/pages/login/logintwice'
					})
					return;
				}
				httpRequest.request('/customapi/cart/addCart', 'GET', {
					goods_id: item.id,
					number: 1,
					sku_id: item.smallgoodsunit.priceinfo.id
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.$refs.cars.getlist()
					}
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},

			click(item) {
				// console.log(item);
				this.fenleiId = item.id;
				this.getlist();
			},
			getCommodityDetail(i) {
				uni.navigateTo({
					url: 'commodityDetail/commodityDetail?id=' + i,
				});
			},
			// 轮播图点击
			clicklbt(index) {
				uni.navigateTo({
					url: this.list1[index].url
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	/deep/.u-line-progress__text{
		font-size: 32rpx !important;
	}
	.inputk {
		border: 1rpx solid #999;
		padding: 20rpx 0;
		border-radius: 10rpx;
		text-align: center;
	}

	.xhtext2 {
		font-size: 24rpx;
		width: 50rpx;
		text-align: center;
		color: #333;
	}

	.jianhao2 {
		width: 32rpx;
		height: 20rpx;
		position: relative;
		top: 10rpx;

		.line2 {
			height: 3.5rpx;
			width: 22rpx;
			background-color: #999999;
		}
	}

	.jiajian2 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 140rpx;
	}


	.posixidan {
		position: fixed;
		bottom: 170rpx;
		right: 30rpx;
	}

	.lefthui {
		height: 100rpx;
		padding: 0 180rpx 0 30rpx;
		background-color: #999999;
		border-radius: 50rpx;
		color: #fff;
		position: relative;
	}

	.righthuang {
		padding: 0 20rpx;
		position: absolute;
		right: -1rpx;
		top: 0;
		border-radius: 50rpx;
		height: 100rpx;
		background-color: #f5ac4f;
		font-size: 32rpx;
	}

	.mainpadding {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;

		.addcar {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			background-color: #F5AC4F;
			border-radius: 50rpx;

		}

		.addcar1 {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border: 4rpx solid #F5AC4F;
			color: #F5AC4F;
			border-radius: 50rpx;
		}

		.addcar2 {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #999999;
			border: 4rpx solid #999999;
			color: #fff;
			border-radius: 50rpx;
		}

		.buybox {
			width: 45%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #F5AC4F;
			background-color: #F5AC4F;
			border-radius: 50rpx;
		}
	}

	.little_song2 {
		padding: 5rpx 15rpx;
		background-color: #F5AC4F;
		// width: 80rpx;
		font-size: 22rpx;
		border-radius: 30rpx;
		color: #FFFFFF;
	}

	.strongtext {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		margin-right: 20rpx;
	}

	.shopShowBox {
		padding: 60rpx 20rpx;

		.bottom {
			display: flex;
			justify-content: space-between;

			.bottomLeft {
				display: flex;
				align-items: flex-end;

				.strongtext {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					margin-right: 20rpx;
				}

				.b2 {
					color: #999999;
					font-size: 28rpx;
				}
			}
		}

		.center {
			.detail {
				font-size: 28rpx;
				display: flex;
				padding: 20rpx 50rpx;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					border: 1px solid #999999;
					border-radius: 20px;
					padding: 16rpx 20rpx;
					margin-bottom: 30rpx;
					width: 40%;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.dtcss {
					border: 1px solid #F5AC4F;
					color: #F5AC4F;
				}

				.nosel {
					border: 1rpx solid lightgray;
				}
			}
		}

		.top {
			display: flex;
			margin-bottom: 20rpx;

			.topLeft {
				overflow: hidden;
				border-radius: 20rpx;

				image {
					border-radius: 20rpx;
					width: 100px;
					height: 100px;
					margin-right: 20rpx;
				}
			}

			.topRight {
				font-size: 32rpx;
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.topRightTop {
					color: #ff0000;
				}

				.topRightBottom {
					display: flex;
				}
			}
		}
	}

	// 分类
	.box {
		display: flex;
		justify-content: space-between;
		padding: 23rpx;
		flex-wrap: wrap;

		.classification {
			margin-bottom: 20rpx;
			width: 340rpx;
			position: relative;
			background-color: #fff;
			border-radius: 25rpx 0px 25rpx 0px;
			overflow: hidden;

			.img {
				position: relative;
				width: 100%;
				height: 340rpx;

				.d1 {
					font-size: 28rpx !important;
					font-family: PingFang SC !important;
					color: #FFFFFF !important;
					position: absolute;
					top: 0;
					left: 0;
					background-color: #FF0000;
					padding: 4rpx 20rpx;
					font-weight: 800 !important;
					border-radius: 25rpx 0px 25rpx 0px;
				}

				.d2 {
					font-size: 28rpx !important;
					font-family: PingFang SC;
					font-weight: 800 !important;
					color: #FFFFFF !important;
					position: absolute;
					bottom: 16rpx;
					right: 10rpx;
				}

				image {
					border-radius: 25rpx 25rpx 0 0;
					width: 100%;
					height: 340rpx;
				}
			}
		}

		.detailed {
			background-color: #ffffff;
			padding: 20rpx;
			font-size: 28rpx;
			display: flex;

			.info,
			.detail,
			.integral {
				display: inline-block;
			}

			.info {
				font-size: 32rpx !important;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.integral {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #999999;
			}

			.detail {
				background-color: #f5ac4f;
				color: #ffffff;
				font-size: 28rpx;
				border-radius: 7rpx;
			}
		}

		.foot {
			background-color: #ffffff;
			padding: 10px;
			font-size: 28rpx !important;
			display: flex;
			justify-content: space-between;
			color: #ff0000;
		}
	}

	.d2 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		color: #ffffff;
		padding: 4rpx 10rpx;
	}


	.good {
		padding: 22rpx;

		.goodMoney {
			.font {
				font-weight: 900;
				font-size: 40rpx;
				padding: 20rpx 0 0 0;
				margin: 0 10rpx;
			}

			.itemBox {
				background-color: #ffffff;
				border-radius: 16rpx;
				margin: 30rpx 0 0 0;
				padding: 23rpx;

				.itemBoxTop {
					display: flex;

					.itemBoxTopLeft {
						margin-right: 20rpx;
						flex-shrink: 0;

						.img {
							position: relative;
							border-radius: 25rpx 25rpx 25rpx 25rpx;
							height: 315rpx;
							color: #ffffff;

							.d1 {
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #FFFFFF;
								border-radius: 20rpx 0rpx 20rpx 0rpx;
								background: #FF0000;
								position: absolute;
								top: 0;
								left: 0;
								padding: 4rpx 10rpx;
							}

							.d2 {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 800;
								position: absolute;
								bottom: 10rpx;
								right: 10rpx;
								color: #ffffff;
								padding: 4rpx 10rpx;
							}

							image {
								width: 320rpx;
								height: 320rpx;
								border-top-left-radius: 16rpx;
								border-top-right-radius: 16rpx;
							}
						}

						.etxt {
							padding-left: 20rpx;
							margin: 20rpx 0;


							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #333333;

							span {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #999999;
								display: inline-block;
								margin-left: 20rpx;
							}
						}
					}

					.itemBoxTopRight {
						font-size: 32rpx;
						font-family: PingFang SC;
						color: #333333;
						flex-grow: 1;

						.flexbetween {
							margin-top: 10rpx;
						}

						// width: 50%;
						.d1 {
							font-size: 36rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #333333;
						}

						.d2 {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							padding-top: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 9;
						}
					}
				}

				.itemBoxBottom {
					margin-top: 20rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: space-between;

					.itemBoxBottomRight {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.goodsPrice {
			margin-top: 80rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #ffffff;

			.price {
				font-size: 36rpx;
				font-weight: 800;
				font-family: PingFang SC;
				color: #ff0000;
				display: flex;
				// float: right;
				justify-content: space-between;
				width: 370rpx;

				// flex: 2;
				.p1 {}

				image {}
			}

			.time {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.goods {
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;

			.goodsRight {
				.gr1 {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					padding: 32rpx 19rpx 16prx 19rpx;
				}

				.gr2 {
					padding: 0 39rpx 16rpx 39rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.goodsLeft {
				width: 370rpx;
				height: 262rpx;

				.goodsLeftBottom {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					display: flex;
					padding: 10rpx 20rpx;
					background-color: #ffffff;
					flex: 1;

					view {
						.jifen {
							color: #999999 !important;
							display: inline-block;
							margin-left: 10rpx;
						}
					}
				}

				.goodsLeftTop {
					.glt3 {
						image {
							width: 370rpx;
							height: 262rpx;
							border-radius: 20rpx 20rpx 0px 0px;
						}

						.glt2 {}
					}

					.glt3 {}
				}
			}
		}

		.good1 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
		}
	}

	.bdr {
		border-radius: 50%;
		width: 18rpx;
		height: 18rpx;
		background-color: #ffffff;
		margin-right: 4rpx;
	}

	.cor {
		background-color: #fff475 !important;
	}

	.activityBox {
		padding: 17rpx 25rpx;

		.noticeBar {
			margin-top: 20rpx;
		}

		.activity {
			background: linear-gradient(to right, #ffc6a0, #ff842a);
			padding: 30rpx 10rpx;
			display: flex;
			border-radius: 20rpx;
			justify-content: space-between;

			.activityLeft {
				font-size: 34rpx;
				font-family: HYZongYiJ;
				font-weight: 400;
				color: #D05700;
				text-align: center;
				padding: 10rpx 0 10rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.Al1 {
					font-size: 38rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}

			.activityRight {
				font-family: HYZongYiJ;
				font-weight: 400;
				padding-right: 30rpx;

				.Ar1 {
					font-size: 28rpx;
					color: #D05700;
				}

				.Ar2 {
					width: 100%;
					height: 20px;
					// background:linear-gradient(to right , #ffffff 45%, #2e54ff 100% );
					border-radius: 20px;
					background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, rgb(254, 228, 193) 50%, rgb(254, 228, 193) 100%);
					margin: 5px 0;
				}

				.jdt {
					margin: 20rpx 0;
				}

				.Ar3 {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 800;
					display: flex;

					.Ar3Left {
						display: flex;
						align-items: center;
						color: #fff475;
						margin-right: 10rpx;
					}

					.Ar3Right {
						display: flex;
						align-items: center;
						color: #ffffff;
					}
				}
			}
		}
	}

	.zdy {
		padding: 0 20rpx;
		color: #333;
		background-color: #fff;
		font-size: 28rpx;
	}

	.boxcolor {
		width: 100%;
		height: 150rpx;
		background-color: #f5ac4f;
		position: relative;
		bottom: 10rpx;
	}

	.relebox {
		position: relative;
		bottom: 130rpx;
	}

	.banner {
		margin-top: 30rpx;
		padding: 0 25rpx 17rpx 25rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.headerBox {
		width: 100%;
		height: 170rpx;
		box-sizing: border-box;
		background: #f5ac4f;

		.header {
			display: flex;
			position: fixed;
			left: 0;
			top: 0;
			align-items: center;
			z-index: 100;
			padding: 0 30rpx 30rpx;
			background: #f5ac4f;
			width: 100%;
			box-sizing: border-box;

			.headerLeft {
				width: 60%;
				border-radius: 50rpx;
				background-color: #fff;
				padding: 10rpx 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				margin-right: 30rpx;
			}

			.headerRight {
				image {
					margin-top: 15rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.overhidden {
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	// 进度条
	.jdt {
		background-color: #FFAE2A;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		position: relative;
	
	}
	
	.mubiao {
		font-size: 32rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #FFFFFF;
	}
	
	.mubiao_content {
		font-size: 32rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #F45610;
	}
	
	.hongbaoimage {
		width: 21rpx;
		height: 27rpx;
		margin-right: 10rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.jdt_leftimage {
		position: absolute;
		bottom: -5rpx;
		left: -5rpx;
		width: 154rpx;
		height: 83rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.jdt_righttimage {
		position: absolute;
		bottom: -5rpx;
		right: 0;
		width: 99rpx;
		height: 62rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.jdtlable {
		position: relative;
	
		.cicle {
			position: relative;
			right: 10rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}
	
		.lable {
			white-space: nowrap;
			position: absolute;
			right: 80%;
			transform: translate(50%, 0%);
			bottom: 40rpx;
			font-size: 28rpx;
			padding: 10rpx;
			font-family: HYZongYiJ;
			color: #FF5001;
			background-color: #fff;
			border-radius: 10rpx;
	
			.sanjiao {
				position: absolute;
				width: 30rpx;
				height: 10rpx;
				bottom: 0rpx;
				right: 50%;
				transform: translate(50%, 50%);
			}
		}
	}
	
	.jdt_bottom {
		padding: 0 100rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: HYZongYiJ;
		font-weight: 800;
		color: #FFFFFF;
	}
	
	.u-line-progress {
		overflow: visible;
	}
</style>